<!DOCTYPE html>
<html>

<head>
  <title>demo</title>
  <!-- Load the polyfill to switch-hit between Chrome and Firefox -->
  <style>
    video {
      border: 5px solid black;
      width: 640px;
      height: 480px;
    }
  </style>
</head>

<body>
  <video id="vid" autoplay></video>
  <br>
  <p>ip_address</p>
  <input id="input" type="text" name="ip_address" value="127.0.0.1">
  <br>
  <button id="btn1">Call</button>
  <button id="btn2">Hang Up</button>
</body>
<script>
  var vid = document.getElementById('vid');
  var btn1 = document.getElementById('btn1');
  var btn2 = document.getElementById('btn2');
  var input = document.getElementById('input');

  btn1.addEventListener('click', start);
  btn2.addEventListener('click', stop);

  btn1.disabled = false;
  btn2.disabled = true;


  var pc = null;
  var xmlhttp = null;

  function start() {
    btn1.disabled = true;
    btn2.disabled = false;
    console.log('Starting Call');

    var servers = null;
    var IP = input.value;
    pc = new RTCPeerConnection(servers);
    console.log('Created remote peer connection object pc');
    pc.onicecandidate = iceCallback;
    pc.onaddstream = gotRemoteStream;

    xmlhttp = new XMLHttpRequest();
    var addr = "http://" + IP + ":8000" + "/webrtc";
    xmlhttp.onreadystatechange = function () {
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var res = xmlhttp.responseText;
        gotoffer(res);
      }
    }
    xmlhttp.open("GET", addr, true);
    xmlhttp.send();

  }

  function onCreateSessionDescriptionError(error) {
    console.log('Failed to create session description: ' + error.toString());
    stop();
  }

  function onCreateAnswerError(error) {
    console.log('Failed to set createAnswer: ' + error.toString());
    stop();
  }

  function onSetLocalDescriptionError(error) {
    console.log('Failed to set setLocalDescription: ' + error.toString());
    stop();
  }

  function onSetLocalDescriptionSuccess() {
    console.log('localDescription success.');
  }

  function gotoffer(offer) {

    console.log('Offer from server \n' + offer);
    var desc = new RTCSessionDescription();
    desc.sdp = offer;
    desc.type = 'offer';
    pc.setRemoteDescription(desc);
    // Since the 'remote' side has no media stream we need
    // to pass in the right constraints in order for it to
    // accept the incoming offer of audio and video.
    pc.createAnswer().then(
      gotDescription,
      onCreateSessionDescriptionError
    );
  }

  function gotDescription(desc) {
    // Provisional answer, set a=inactive & set sdp type to pranswer.
    /*desc.sdp = desc.sdp.replace(/a=recvonly/g, 'a=inactive');
    desc.type = 'pranswer';*/
    pc.setLocalDescription(desc).then(
      onSetLocalDescriptionSuccess,
      onSetLocalDescriptionError
    );
    console.log('Pranswer from pc \n' + desc.sdp);
    //conn.send(JSON.stringify(desc));
    // send desc.sdp to server
  }

  function stop() {
    console.log('Ending Call' + '\n\n');
    pc.close();
    pc = null;
    btn1.disabled = false;
    btn2.disabled = true;
  }

  function gotRemoteStream(e) {
    vid.srcObject = e.stream;
    console.log('Received remote stream');
  }

  function iceCallback(event) {
    if (event.candidate) {
      console.log('Remote ICE candidate: \n ' + event.candidate.candidate);
      //conn.send(JSON.stringify(event.candidate));
    }
    else {
      // All ICE candidates have been sent
    }
  } 
</script>

</html>